"use client"
import LeftWebrtc from '@/components/LeftWebrtc';
import * as hrefs from '@/lib/conifg';
import { CustomLink } from '@/components/CustomLink';

const Home = () => {
    
    const handleHrefs = () => {
        const arr = [];
        for (const stat in hrefs) {
            const value = hrefs[stat as keyof typeof hrefs];
            if (Array.isArray(value)) {
                arr.push(...value);
            }
        }
        return arr;
    }

    // 项目功能特性数据
    const features = [
        {
            title: "用户认证系统",
            description: "基于 JWT 的认证机制，支持角色权限管理",
            icon: "🔐",
            href: "/login"
        },
        {
            title: "WebRTC 通信",
            description: "实时音视频通话、录制和屏幕共享功能",
            icon: "📹",
            href: "/webrtc"
        },
        {
            title: "WebGL 3D 渲染",
            description: "基于 Three.js 和 WebGL 的 3D 图形展示与交互",
            icon: "🎮",
            href: "/webgl"
        },
        {
            title: "AI SQL 生成",
            description: "自然语言转换为 SQL 查询，提升数据查询效率",
            icon: "🤖",
            href: "/sql"
        },
        {
            title: "向量处理",
            description: "高效的向量数据分析和处理能力",
            icon: "📊",
            href: "/vector"
        },
        {
            title: "实时聊天",
            description: "基于 Socket.IO 的实时消息通信系统",
            icon: "💬",
            href: "/webrtc/text"
        },
        {
            title: "用户管理",
            description: "系统用户的增删改查和权限管理",
            icon: "👥",
            href: "/users"
        }
    ];

  return (
    <div className="flex h-screen flex-col sm:flex-row">
        {/* <LeftWebrtc hrefs={handleHrefs()}></LeftWebrtc> */}
        <div className='flex-1 p-4 sm:p-8 overflow-auto bg-gray-50'>
            <div className="max-w-5xl mx-auto">
                {/* 项目标题和简介 */}
                <div className="mb-12">
                    <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-gray-800 mb-4">
                        Agent SSR - 全栈智能应用
                    </h1>
                    <p className="text-lg sm:text-xl text-gray-600 leading-relaxed">
                        这是一个基于 Next.js 15 的全栈应用，集成了多种前沿技术，包括 WebRTC、WebGL、AI 对话、SQL 生成、用户管理等功能，
                        提供了完整的用户认证系统、实时通信能力和用户权限管理功能。
                    </p>
                </div>

                {/* 技术栈 */}
                <div className="mb-12">
                    <h2 className="text-2xl font-bold text-gray-800 mb-4">🚀 技术栈</h2>
                    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
                        {[
                            "Next.js 15", "React 19", "TypeScript", "Ant Design 5",
                            "Redux Toolkit", "Tailwind CSS", "WebRTC", "Socket.IO",
                            "Three.js", "WebGL", "JWT", "Cookie", "Sequelize", "MySQL"
                        ].map((tech, index) => (
                            <div key={index} className="bg-white px-4 py-3 rounded-lg shadow-sm border border-gray-200 text-center">
                                {tech}
                            </div>
                        ))}
                    </div>
                </div>

                {/* 功能特性 */}
                <div className="mb-12">
                    <h2 className="text-2xl font-bold text-gray-800 mb-6">🛠️ 功能特性</h2>
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                        {features.map((feature, index) => (
                            <CustomLink key={index} href={feature.href} className="block">
                                <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200 hover:shadow-md transition-shadow cursor-pointer hover:border-blue-300 hover:shadow-lg">
                                    <div className="text-3xl mb-3">{feature.icon}</div>
                                    <h3 className="text-xl font-semibold text-gray-800 mb-2">{feature.title}</h3>
                                    <p className="text-gray-600">{feature.description}</p>
                                </div>
                            </CustomLink>
                        ))}
                    </div>
                </div>

                {/* 项目结构预览 */}
                <div className="mb-12">
                    <h2 className="text-2xl font-bold text-gray-800 mb-4">📁 项目结构</h2>
                    <div className="bg-gray-800 text-gray-200 p-4 rounded-lg overflow-x-auto">
                        <pre className="text-sm">
{`src/
├── app/                    # Next.js App Router 页面
│   ├── api/               # API 路由
│   ├── webrtc/            # WebRTC 相关页面
│   ├── webgl/             # WebGL 3D 页面
│   ├── sql/               # SQL 查询页面
│   ├── vector/            # 向量处理页面
│   └── users/             # 用户管理页面
├── components/            # 可复用组件
├── hooks/                 # 自定义 Hooks
├── lib/                   # 工具库和配置
├── store/                 # Redux 状态管理
├── types/                 # TypeScript 类型定义
├── context/               # React Context
└── test/                  # 项目测试文件

tests/                     # 独立的认证测试文件目录`}
                        </pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
  );
};

export default Home;
